<script>

    import SideElement from "./SideElement.svelte";

    export let switch_side = true;
    $:switch_side_classname = switch_side ? "show" : '';

    function change(bool_value = null) {
        console.log(switch_side)
        let tmp = !switch_side
        console.log(tmp)
        if (bool_value !== null) {
            switch_side = bool_value;
        } else {
            switch_side = (tmp);
        }
        console.log(switch_side)
    }

    // 添加折叠状态控制
    let isCollapsed = false;

    // 切换折叠状态的函数
    function toggleCollapse() {
        isCollapsed = !isCollapsed;
        switch_side = !switch_side
    }
</script>
<div class="side-container">
    <button class="hamburger-btn" on:click={toggleCollapse}>
        <div class="hamburger" class:active={!isCollapsed}>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </button>
    <main class="side-right {switch_side_classname}" class:collapsed={isCollapsed}>


        <div class="inner">
            <div class="title">
                <slot name="title">
                    <div class="main-title"></div>
                    <div class="sub-title"></div>
                </slot>
            </div>
            <hr>

            <div class="inner-side" on:click|stopPropagation>
                <slot>

                    <SideElement title="围城" />
                </slot>
            </div>
        </div>
    </main>
</div>

<style lang="less">
  .inner-side{
    width: 80%;
    margin: 0 auto 50px  auto ;

  }
  .inner-template {
    padding: 1rem;
  }

  :global(.main-title){
    font-size: 1.2rem;
    font-weight: bold;
  }

  :global(.sub-title){
    font-size: 0.8rem;
    color: #666;
  }

  .title {
      position: sticky;
      top: 0;
      background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

    .inner-template;
    font-size: 1.2rem;
    font-weight: bold;
  }

  .side-right {
    overflow: auto;

    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    transform-origin: top left;
    transform: scaleX(0%);
    width: fit-content;
    min-width: 30%;

    &.collapsed {
        width: 60px;

        .inner {
            display: none;
        }

        & + .hamburger-btn {
            left: 10px;
        }
    }

    &.show:not(.collapsed) + .hamburger-btn {
        left: calc(30% + 10px);
    }
  }

  .show {
    transform: scaleX(100%);
  }

  .side-base {
    position: relative;
    width: 300px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    transition: width 0.3s ease;

    &.collapsed {
        width: 50px;

        .content {
            display: none;
        }
    }
  }

  .collapse-btn {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;

    &:hover {
        background-color: rgba(240, 240, 240, 0.9);
    }

    span {
        font-size: 12px;
    }
  }

  .content {
    height: 100%;
    overflow-y: auto;
  }

  .hamburger-btn {
    position: fixed;
    left: 10px;
    bottom: 10px;
    background: orangered;
    border-radius: 50%;
    //background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1145141919811;
    transition: left 0.3s ease;
  }

  .hamburger {
    width: 20px;
    height: 16px;
    position: relative;
    
    span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease;

        &:nth-child(1) {
            top: 0;
        }

        &:nth-child(2) {
            top: 7px;
        }

        &:nth-child(3) {
            top: 14px;
        }
    }

    &.active {
        span {
            &:nth-child(1) {
                transform: rotate(45deg);
                top: 7px;
            }

            &:nth-child(2) {
                opacity: 0;
            }

            &:nth-child(3) {
                transform: rotate(-45deg);
                top: 7px;
            }
        }
    }
  }


  .side-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1145141919810;
  }
</style>
